@extends('admin.master')

@section('top')
<div class="top-breadcrumb pull-left">{!! Breadcrumbs::render('customer-edit') !!}</div>
@endsection

@section('content')
	<div class="container-body" id="view">
	{!! Form::model($data, ['route' => ['admin.customer.update', $data->id], 'method'=>'patch', 'class'=>'form-horizontal']) !!}
		<input name="referer" type="hidden" value="{{ request()->header('referer') }}">
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">
				<span class="text-danger">*</span> <span>客户名称</span>
			</label>
			<div class="col-sm-6 row">
				{!! Form::text('name', null, ['class'=>'form-control len', 'data-rule'=>'required']) !!}
				<div class="checkbox input-right ">
					<label>{!! Form::checkbox('vip', 1, null) !!} <span>VIP客户</span></label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">域名</label>
			<div class="col-sm-8 row">
				{!! Form::text('domain', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">联系人</label>
			<div class="col-sm-8 row">
				{!! Form::text('contact_people', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">手机号</label>
			<div class="col-sm-8 row">
				{!! Form::text('phone', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">座机</label>
			<div class="col-sm-8 row">
				{!! Form::text('tel', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">QQ</label>
			<div class="col-sm-8 row">
				{!! Form::text('qq', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">邮箱</label>
			<div class="col-sm-8 row">
				{!! Form::text('email', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">业务员：</label>
			<div class="col-sm-8 row">
				{!! Form::hidden('saler_id', null, ['v-model'=>'saler']) !!}
				<div class="input-place len150" id="saler-select">
					<span class="filter-option pull-left" v-cloak>@{{ name ? name : '选择业务员' }}</span>
					<span class="bs-caret"><span class="caret"></span></span>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 所在地区：</label>
			<div class="col-sm-8 row">
				<div class="block-inline" data-toggle="distpicker">
					<select name="city[province]" class="form-control" data-province="{{ $data->city['province'] }}"></select>
					<select name="city[city]" class="form-control" data-city="{{ $data->city['city'] }}"></select>
					<select name="city[district]" class="form-control" data-district="{{ $data->city['district'] }}"></select>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 详细地址：</label>
			<div class="col-sm-8 row">
				{!! Form::textarea('detail_address', null, ['class'=>'form-control len', 'rows'=>5, 'placeholder'=>'请您如实填写详细地址']) !!}
			</div>
		</div>	
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">备注</label>
			<div class="col-sm-8 row">
				<script id="editor" name="remark" type="text/plain">{!! $data->remark !!}</script>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"></label>
			<div class="col-sm-8 row">
				{!! Form::submit('提交', ['class'=>'btn btn-primary']) !!}
			</div>
		</div>
	{!! Form::close() !!}
	<!-- Modal -->
	<div class="modal fade" id="dialog-saler" tabindex="-1" role="dialog">
	  <div class="modal-dialog">
	    <div class="modal-content">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
	            <h4 class="modal-title">选择业务员</h4>
	        </div>
	        <div class="modal-body clearfix">
	        	<input type="text" class="form-control" v-model="word" placeholder="输入业务姓名搜索">
				<div class='salers-list mt15'>
					<a href='javascript:;' v-bind:class="{ 'active': saler==$key }" data-id="@{{ item.id }}" v-for="item in users | filterBy word">
					  @{{ item.name }}
					</a>
				</div>
	        </div>
	    </div>
	  </div>
	</div>
	<!-- Modal End -->
	</div>
@endsection

@section('foot')
<script src="{{ url('js/distpicker/distpicker.data.min.js') }}"></script>
<script src="{{ url('js/distpicker/distpicker.js') }}"></script>
<script src="{{ url('js/ueditor/ueditor.config.js') }}"></script>
<script src="{{ url('js/ueditor/ueditor.all.min.js') }}"></script>
<script src="{{ url('js/nice-validator/jquery.validator.js?local=zh-CN') }}"></script>
<script type="text/javascript">
	UE.getEditor('editor');
	
  	var salerLoadUrl = "{{ url('admin/salers-ajax') }}";
	var vm = new Vue({
		el: '#view',
		data: {
			saler: 0,
			name: '',
			users: [],
		}
	});

	$.getJSON(salerLoadUrl, function(data) {
		vm.users = data;
		vm.$set('name', data[vm.saler].name);
	});

	// 选择业务员
	$('#saler-select').on('click', function() {
		$('#dialog-saler').modal('show');
		return false;
	});

	$('.modal-body').on('click', '.salers-list a', function() {
		vm.$set('saler', $(this).data('id'));
		vm.$set('name', $(this).text());

		$('#dialog-saler').modal('hide');
	});
</script>
@endsection
